<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正方体</title>
		<style> 
			html {
        background: -webkit-radial-gradient(center, ellipse, #191970 0%, #000000 100%);
        background: radial-gradient(ellipse at center, #191970 0%, #000000 100%);
        height: 100%;
      }
 
      #window {
        width: 20em;
        height: 20em;
        position: absolute;
        left: 50%;
        top:50%;
        margin-left: -10em;
        margin-top: -10em;
        -webkit-perspective: 1000px;
      }
			
			#box{
        -webkit-animation: 50s spin linear infinite;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(-20deg) rotateY(-20deg);
      }
			
			.face {
        background: -webkit-linear-gradient(left, rgba(	65,105,225, 0.5) 0px, rgba(	65,105,225, 0.5) 3px, rgba(0, 0, 0, 0) 0px), 
                    -webkit-linear-gradient(top, rgba(	65,105,225, 0.5) 0px, rgba(	65,105,225, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
        -webkit-background-size: 2.5em 2.5em;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        color: #77ffb9;
        box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8);
      }
      
      #face-front {
        transform: translateZ(10em);
      }
 
      #face-left {
        -webkit-transform: rotateY(-90deg) translateZ(10em);
      }
 
      #face-top {
        -webkit-transform: rotateX(90deg) translateZ(10em);
      }
 
      #face-right {
        -webkit-transform: rotateY(90deg) translateZ(10em);
      }
 
      #face-bottom {
        -webkit-transform: rotateX(-90deg) translateZ(10em);
      }
 
      #face-back {
        -webkit-transform: rotateX(180deg) translateZ(10em);
      }
      
      @-webkit-keyframes spin {
        from{
          -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
          transform: translateZ(-10em) rotateX(0) rotateY(0deg);
        }
        to{
          -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
        transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
        }
      }
		</style>
	</head>
	<body>
		<div id="window">
      <div id="box">
        <div class="face" id="face-front"></div>
        <div class="face hide" id="face-left"></div>
        <div class="face hide" id="face-top"></div>
        <div class="face hide" id="face-right"></div>
        <div class="face hide" id="face-bottom"></div>
        <div class="face hide" id="face-back"></div>
      </div>
    </div>
	</body>
</html>
